<template> 
    <div class="operationRecordBox">
        <div class="tabBox">
            <tab-vue class="tab-vue" :tabArr="tabArr" :tabVuebackground="'none'" :curTabIndex="curTabIndex" @getCurTabIndexFn="getCurTabIndexFn"></tab-vue>
        </div>
        <div class="contentClass">
            <div class="headerSearchBox" v-show="1>2">
                <div class="header_search">
                    <span>模糊搜索：</span> 
                    <el-input placeholder="请输入内容" class="input-with-select" v-model="inputSearch">
                        <el-button slot="append" icon="el-icon-search" @click="messageSearch"></el-button>
                    </el-input>
                </div>
            </div>
            <div class="table-vue">
                <lpj-table-vue v-if="openBox" ref="lpjTable1" :tableData="tableData" :tableHeaderData="tableHeaderData" @pointerClick="pointerClick" ></lpj-table-vue>         
            </div>
            <div>
                <pagination v-if="paginationMes.total&&paginationMes.total>5" align="right" :paginationMes="paginationMes" @sizeChangeFn="sizeChangeFn" @currentChangeFn="currentChangeFn"></pagination>
            </div>
        </div>
    </div>
</template>

<script>
 /* eslint-disable */ 
import { getReceiveRecord, getTransferRecord , getRepairsRecord , getSendBackRecord , getDisposeRecord,getOperationRecordCount} from "./api"
import TabVue from "@/components/TabVue"
import Pagination from "@/components/Pagination"
import LpjTableVue from "@/components/LpjTableVue"
// import LjTableVue from "./../../assetsManage/components/LpjTableVue"
export default {
    name:"operationRecord",
    components:{
        TabVue,
        Pagination,
        LpjTableVue,
        // LjTableVue
    },
    data(){
        return {
            /*tab 按钮 */
            tabArr:[
                {label:"领用记录(0)"},
                {label:"转移记录(0)"},
                {label:"维修记录(0)"},
                {label:"退还记录(0)"},
                {label:"处置记录(0)"}
            ],
            /*当前选中的 tab下标*/
            curTabIndex:0,
            //表格头的头部
            tableHeaderData:[{label:"主图",prop:"image_url"},
                        {label:"资产编号",prop:"asset_no",pointer:true},
                        {label:"资产名称",prop:"asset_name",sortable:true,},
                        {label:"当前状态",prop:"asset_status_name",filters:[],},
                        {label:"审批申请时间",prop:"approveTime",sortable:true,},
                        {label:"审批完成时间",prop:"time",sortable:true,},
                        {label:"领用方式",prop:"wayOrReason",filters:[],},
                        {label:"所属分类",prop:"cate_name",filters:[],},
                        {label:"使用部门",prop:"afterDepartment",filters:[],},
                        {label:"申请人",prop:"bringTurnMan"},
                        {label:"申请备注",prop:"recipientsNote"}
                        ],
            /*table里的数据 */
            tableData:[],
            /*分页 数据*/
            paginationMes:{},
            /*默认分页数据 */
            defaultPaginationMes:[{ page:1,per_page:10 },{ page:1,per_page:10 },{ page:1,per_page:10 },{ page:1,per_page:10 },{ page:1,per_page:10 }],
            inputSearch:'', /**模糊查询 */
            openBox:true,

        }
    },
    created(){
        /**查询各类操作总数 */
        getOperationRecordCount().then(res=>{
            this.tabArr = [
                {label:`领用记录(${res.receive})`},
                {label:`转移记录(${res.transfer})`},
                {label:`维修记录(${res.repairs})`},
                {label:`退还记录(${res.sendBack})`},
                {label:`处置记录(${res.dispose})`}
            ]
        })
        //刷新 该页面重新执行一遍*/
        this.getCurTabIndexFn(this.curTabIndex)
    },
    methods:{
        linkBtnFn(val,obj){
            this.$router.push({ path:'/RepairDetails',query:{id:obj.id, param: this.$route.meta.title} })
        },
        pointerClick(data){
            this.$router.push({name:"myAssetsDetails",query:{key:data.asset_id, param: this.$route.meta.title,}})
        },
        /*tab切换选中的下表 */
        getCurTabIndexFn(val,defaultPaginationMes){
            /**设置打开tab或者默认tab */
            this.openBox = false
            this.inputSearch = ''
            this.curTabIndex=val;
            /**初始化请求分页参数 */
            var param = defaultPaginationMes == undefined?{ ...this.defaultPaginationMes[val],bs:2,message:this.inputSearch}:param={ ...defaultPaginationMes,bs:2,message:this.inputSearch};
            /**领用，退还，报废等记录 bs参数为1 */
            val === 0 || val === 3 || val === 4 ? param.bs = 1 : '';
            this.tableData = [];
            this.getTableDataFn(val,param)
        },
        /*根据tab下标获取相对应的table数据 */
        getTableDataFn(index,param){
            switch(index){
                case 0: /**领用 */
                    this.getAssetsRecieveRecordsFn(param)
                    break;
                case 1: /**转移 */
                    this.getAssetsTransferRecordsFn(param)
                    break;
                case 2: /**维修 */
                    this.getAssetsRepairRecordsFn(param)
                    break;
                case 3: /**退还 */
                    this.getAssetsReturnRecordsFn(param)
                    break;
                case 4: /**处置 */
                    this.getAssetsScrapRecordsFn(param)
                    break;  
            }
        },
        /**模糊查询按钮 */
        messageSearch(){
            if(this.curTabIndex!=2&&this.curTabIndex!=4){
                /**初始化请求分页参数 */
                var paramSearch = { ...this.defaultPaginationMes[this.curTabIndex],bs:2,message:this.inputSearch};
                /**领用，退还，报废等记录 bs参数为1 */
                this.curTabIndex === 0 || this.curTabIndex === 3 || this.curTabIndex === 4 ? paramSearch.bs = 1 : '';
                this.tableData = [];
                this.getTableDataFn(this.curTabIndex,paramSearch)
            }
            
        },
         /*获取资产转移记录*/
        getAssetsTransferRecordsFn(param){
            this.tableHeaderData=[
                {label:"主图",prop:"image_url"},
                {label:"资产编号",prop:"asset_no",pointer:true},
                {label:"资产名称",prop:"asset_name",sortable:true,},
                {label:"当前状态",prop:"asset_status_name",filters:[],},
                {label:"审批申请时间",prop:"start_time",sortable:true,},
                {label:"审批完成时间",prop:"complete_time",sortable:true,},
                {label:"转移至部门",prop:"belongs_department",filters:[],},
                {label:"转移至人",prop:"belongs_name",filters:[],},
                {label:"转移原因",prop:"operating_reason",filters:[],},
                {label:"申请人",prop:"applicant_user"},
                {label:"申请备注",prop:"operating_remark"},
            ];
            getTransferRecord(param).then((res)=>{
                this.paginationMes={total:res.total,current_page:Number(res.current_page),per_page:Number(res.per_page)}
                this.tableData=res.data

                this.tableHeaderData[3].filters = []
                let assetStatusFilter = this.tableData.map(item=>{ return item.asset_status_name })
                let assetStatusFilterSet = [...new Set(assetStatusFilter)]
                assetStatusFilterSet.map(opt=>{ opt?this.tableHeaderData[3].filters.push({text: opt, value: opt}):'' })

                this.tableHeaderData[6].filters = []
                let afterDepartmentFilter = this.tableData.map(item=>{ return item.belongs_department })
                let afterDepartmentFilterSet = [...new Set(afterDepartmentFilter)]
                afterDepartmentFilterSet.map(opt=>{ opt?this.tableHeaderData[6].filters.push({text: opt, value: opt}):'' })

                this.tableHeaderData[7].filters = []
                let bringTurnManFilter = this.tableData.map(item=>{ return item.belongs_name })
                let bringTurnManFilterSet = [...new Set(bringTurnManFilter)]
                bringTurnManFilterSet.map(opt=>{ opt?this.tableHeaderData[7].filters.push({text: opt, value: opt}):'' })

                this.tableHeaderData[8].filters = []
                let wayOrReasonFilter = this.tableData.map(item=>{ return item.operating_reason })
                let wayOrReasonFilterSet = [...new Set(wayOrReasonFilter)]
                wayOrReasonFilterSet.map(opt=>{ opt?this.tableHeaderData[8].filters.push({text: opt, value: opt}):'' })

                this.openBox = true
                this.assetStatusColorCri();

            })
        },
        /*获取资产领用记录*/
        getAssetsRecieveRecordsFn(param){
            this.tableHeaderData=[
                {label:"主图",prop:"image_url"},
                {label:"资产编号",prop:"asset_no",pointer:true},
                {label:"资产名称",prop:"asset_name",sortable:true,},
                {label:"当前状态",prop:"asset_status_name",filters:[],},
                {label:"审批申请时间",prop:"start_time",sortable:true,},
                {label:"审批完成时间",prop:"complete_time",sortable:true,},
                {label:"领用方式",prop:"operating_reason",filters:[],},
                {label:"所属分类",prop:"cate_name",filters:[],},
                {label:"使用部门",prop:"belongs_department",filters:[],},
                {label:"申请人",prop:"applicant_user"},
                {label:"申请备注",prop:"operating_remark"},
            ]
            getReceiveRecord(param).then((res)=>{
                this.paginationMes={total:res.total,current_page:Number(res.current_page),per_page:Number(res.per_page)}
                this.tableData=res.data

                this.tableHeaderData[3].filters = [] 
                this.tableHeaderData[6].filters = []
                this.tableHeaderData[7].filters = []
                this.tableHeaderData[8].filters = []
                let assetStatusFilter = this.tableData.map(item=>{
                    return item.asset_status_name
                })
                let wayOrReasonFilter = this.tableData.map(item=>{
                    return item.operating_reason
                })
                let assetClassFilter = this.tableData.map(item=>{
                    return item.cate_name
                })
                let afterDepartmentFilter = this.tableData.map(item=>{
                    return item.belongs_department
                })
                let assetStatusFilterSet = [...new Set(assetStatusFilter)]
                let wayOrReasonFilterSet = [...new Set(wayOrReasonFilter)]
                let assetClassFilterSet = [...new Set(assetClassFilter)]
                let afterDepartmentFilterSet = [...new Set(afterDepartmentFilter)]
                assetStatusFilterSet.map(opt=>{
                    opt?this.tableHeaderData[3].filters.push({text: opt, value: opt}):''
                })
                wayOrReasonFilterSet.map(opt=>{
                    opt?this.tableHeaderData[6].filters.push({text: opt, value: opt}):''
                })
                assetClassFilterSet.map(opt=>{
                    opt?this.tableHeaderData[7].filters.push({text: opt, value: opt}):''
                })
                afterDepartmentFilterSet.map(opt=>{
                    opt?this.tableHeaderData[8].filters.push({text: opt, value: opt}):''
                })
                
                this.openBox = true
                this.assetStatusColorCri();

            })
        },
        /*资产维修记录*/
        getAssetsRepairRecordsFn(param){
            this.tableHeaderData=[
                {label:"主图",prop:"image_url"},
                {label:"资产编号",prop:"asset_no",pointer:true},
                {label:"资产名称",prop:"asset_name",sortable:true,},
                {label:"当前状态",prop:"asset_status_name",filters:[],},
                {label:"维修申请时间",prop:"start_time",sortable:true,},
                {label:"维修完成时间",prop:"complete_time",sortable:true,},
                {label:"维修人",prop:"maintain_user",filters:[],},
                {label:"维修备注",prop:"maintain_content",},
                {label:"维修费用",prop:"maintain_money",},
                {label:"申请人",prop:"applicant_user"},
                {label:"申请备注",prop:"operating_remark"},
            ],
            getRepairsRecord(param).then((res)=>{
                this.paginationMes={total:res.total,current_page:Number(res.current_page),per_page:Number(res.per_page)}
                this.tableData=res.data
                if(this.tableData.length){

                    this.tableHeaderData[3].filters = []
                    let assetStatusFilter = this.tableData.map(item=>{ return item.asset_status_name })
                    let assetStatusFilterSet = [...new Set(assetStatusFilter)]
                    assetStatusFilterSet.map(opt=>{ opt?this.tableHeaderData[3].filters.push({text: opt, value: opt}):'' })

                    this.tableHeaderData[6].filters = []
                    let repairUsetNameFilter = this.tableData.map(item=>{ return item.maintain_user })
                    let repairUsetNameFilterSet = [...new Set(repairUsetNameFilter)]
                    repairUsetNameFilterSet.map(opt=>{ opt?this.tableHeaderData[6].filters.push({text: opt, value: opt}):'' })
                }
                this.openBox = true
                this.assetStatusColorCri();
            })
        },
        /*资产报修记录 详情按钮*/
        toLinkDetailsFn(scope){
            this.$router.push({ path:'/RepairDetails',query:{key:scope.id} })
        },
        /*资产退还记录*/
        getAssetsReturnRecordsFn(param){
            this.tableHeaderData=[
                {label:"主图",prop:"image_url"},
                {label:"资产编号",prop:"asset_no",pointer:true},
                {label:"资产名称",prop:"asset_name",sortable:true,},
                {label:"当前状态",prop:"asset_status_name",filters:[],},
                {label:"审批申请时间",prop:"start_time",sortable:true,},
                {label:"审批完成时间",prop:"complete_time",sortable:true,},
                {label:"当时归属部门",prop:"belongs_department",filters:[],},
                {label:"当时归属仓库",prop:"warehouse_name",filters:[],},
                {label:"退还原因",prop:"operating_reason",filters:[],},
                {label:"申请人",prop:"applicant_user"},
                {label:"申请备注",prop:"operating_remark"},
            ],
            getSendBackRecord(param).then((res)=>{
                this.paginationMes={total:res.total,current_page:Number(res.current_page),per_page:Number(res.per_page)}
                this.tableData=res.data

                if(this.tableData.length){

                    this.tableHeaderData[3].filters = []
                    let assetStatusFilter = this.tableData.map(item=>{ return item.asset_status_name })
                    let assetStatusFilterSet = [...new Set(assetStatusFilter)]
                    assetStatusFilterSet.map(opt=>{ opt?this.tableHeaderData[3].filters.push({text: opt, value: opt}):'' })

                    this.tableHeaderData[6].filters = []
                    let beforeDepartmentFilter = this.tableData.map(item=>{ return item.belongs_department })
                    let beforeDepartmentFilterSet = [...new Set(beforeDepartmentFilter)]
                    beforeDepartmentFilterSet.map(opt=>{ opt?this.tableHeaderData[6].filters.push({text: opt, value: opt}):'' })

                    this.tableHeaderData[7].filters = []
                    let storagePlaceFilter = this.tableData.map(item=>{ return item.warehouse_name })
                    let storagePlaceFilterSet = [...new Set(storagePlaceFilter)]
                    storagePlaceFilterSet.map(opt=>{ opt?this.tableHeaderData[7].filters.push({text: opt, value: opt}):'' })

                    this.tableHeaderData[8].filters = []
                    let refundReasonFilter = this.tableData.map(item=>{ return item.operating_reason })
                    let refundReasonFilterSet = [...new Set(refundReasonFilter)]
                    refundReasonFilterSet.map(opt=>{ opt?this.tableHeaderData[8].filters.push({text: opt, value: opt}):'' })
                
                }
                this.openBox = true
                this.assetStatusColorCri();
            })
        },
        /*资产报废记录*/
        getAssetsScrapRecordsFn(param){
            this.tableHeaderData=[
                {label:"主图",prop:"image_url"},
                {label:"资产编号",prop:"asset_no",pointer:true},
                {label:"资产名称",prop:"asset_name",sortable:true,},
                {label:"当前状态",prop:"asset_status_name",filters:[],},
                {label:"审批申请时间",prop:"start_time",sortable:true,},
                {label:"审批完成时间",prop:"complete_time",sortable:true,},
                {label:"当时归属部门",prop:"belongs_department",filters:[],},
                {label:"当时归属仓库",prop:"warehouse_name",filters:[],},
                {label:"处置原因",prop:"operating_reason",filters:[],},
                {label:"申请人",prop:"applicant_user"},
                {label:"申请备注",prop:"operating_remark"},
            ],
            getDisposeRecord(param).then((res)=>{
                this.paginationMes={total:res.total,current_page:Number(res.current_page),per_page:Number(res.per_page)}
                this.tableData=res.data
                if(this.tableData.length){

                    this.tableHeaderData[3].filters = []
                    let assetStatusFilter = this.tableData.map(item=>{ return item.asset_status_name })
                    let assetStatusFilterSet = [...new Set(assetStatusFilter)]
                    assetStatusFilterSet.map(opt=>{ opt?this.tableHeaderData[3].filters.push({text: opt, value: opt}):'' })

                    this.tableHeaderData[6].filters = []
                    let beforeDepartmentFilter = this.tableData.map(item=>{ return item.belongs_department })
                    let beforeDepartmentFilterSet = [...new Set(beforeDepartmentFilter)]
                    beforeDepartmentFilterSet.map(opt=>{ opt?this.tableHeaderData[6].filters.push({text: opt, value: opt}):'' })

                    this.tableHeaderData[7].filters = []
                    let beforeWarehouseFilter = this.tableData.map(item=>{ return item.warehouse_name })
                    let beforeWarehouseFilterSet = [...new Set(beforeWarehouseFilter)]
                    beforeWarehouseFilterSet.map(opt=>{ opt?this.tableHeaderData[7].filters.push({text: opt, value: opt}):'' })
                    this.tableHeaderData[8].filters = []
                    let processReasonFilter = this.tableData.map(item=>{ return item.operating_reason })
                    let processReasonFilterSet = [...new Set(processReasonFilter)]
                    processReasonFilterSet.map(opt=>{ opt?this.tableHeaderData[8].filters.push({text: opt, value: opt}):'' })
                }
                this.openBox = true
                this.assetStatusColorCri();
            })
        },
        /**状态前的圆点颜色 */
        assetStatusColorCri(){
            this.tableData.forEach(item=>{
                if(item.asset_status_name=='在用'){ item.color = "#15BC83" }
                if(item.asset_status_name=='报废'){ item.color = "rgb(252,46,84)" }
                if(item.asset_status_name=='转移中'){ item.color = "#3296FA" }
                if(item.asset_status_name=='维修中'){ item.color = "#3296FA" }
                if(item.asset_status_name=='领用中'){ item.color = "#3296FA"  }
                if(item.asset_status_name.includes('处置')){ item.color = "#3296FA" }
                if(item.asset_status_name=='退还中'){ item.color = "#3296FA" }
                if(item.asset_status_name=='审批中'){ item.color = "#3296FA" }
                if(item.asset_status_name=='闲置'){ item.color = "#FEE151" }
                
            })
        },
        /*分页传过来的 当前第几页 */
        currentChangeFn(val){
            this.defaultPaginationMes[this.curTabIndex].page=val
            this.getCurTabIndexFn(this.curTabIndex,this.defaultPaginationMes[this.curTabIndex])
        },
        /*分页传过来的 table每页的条数 */
        sizeChangeFn(val){
            this.defaultPaginationMes[this.curTabIndex]={page:1,pageSize:val}
            this.getCurTabIndexFn(this.curTabIndex,this.defaultPaginationMes[this.curTabIndex])
        },
    }
}
</script>

<style lang='stylus' scoped>
.operationRecordBox
    .tabBox
        border-bottom 1px solid #DCDFE6
        height 40px
    .contentClass
        background  #fff
        padding 16px 
        border-radius 4px
        margin-top 10px
        .headerSearchBox
            height 40px
            .header_search
                float right
                margin-right 5px
            span 
                font-family  "SourceHanSansCN-Regular" !important
                font-weight 500
                color #191F25 
            .el-input
                width 300px
            .el-button
                width 32px
                color #fff
            >>>.el-input-group__append
                overflow hidden
                background #409EFF
        .table-vue
            margin-bottom 10px
</style>
